<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #mydiv2{
            visibility: hidden;
        }
    </style>
    <script>
        window.onload=function(){
            var mydiv=document.getElementById("mydiv");
            console.log(mydiv);

            // DOM对象.innerHTML
            // console.log(mydiv.innerHTML);//输出div中的内容，如果有标签，输出整个标签
            // mydiv.innerHTML="<h3>这周我和我的爱人一起去了浪漫土耳其</h3>";//将h3解析成了h3标签

            // DOM对象.innerText
            // console.log(mydiv.innerText);//获取的是纯文本
            // mydiv.innerText="<h2>这周王子伟fall in love with 唐毅</h2>";//将h2标签当成了纯文本

            // DOM对象.textContent
            // console.log(mydiv.textContent);//获取的是纯文本
            // mydiv.textContent="<h2>这周王子伟fall in love with 唐毅</h2>";//将h2标签当成了纯文本


          

            var mydiv2=document.getElementById("mydiv2");//DOM对象
            // 区别1：innerText无法返回隐藏元素(visibility:hidden)的文本内容，而textContent可以返回
            // console.log(mydiv2.innerText);
            // console.log(mydiv2.textContent);


            var mydiv3=document.getElementById("mydiv3");//DOM对象
            // 区别2：innerText依赖于浏览器的显示，textContent依赖于代码的显示
            console.log(mydiv3.innerText);
            console.log(mydiv3.textContent);


            // 区别3：innerText将\n解析成换行,textContent解析成空格
            var mydiv4=document.getElementById("mydiv4");//DOM对象
            // mydiv4.innerText="我是\n哈哈";
            mydiv4.textContent="我是\n哈哈";
        };
       
    </script>
</head>
<body>
    <div id="mydiv">
        <p>p1</p>
        <p>p2</p>
    </div>
    <div id="mydiv2">嘿嘿</div>
    <div id="mydiv3"><div>我是王紫薇，我今年20了</div><div>我腰不痛了，腿也不酸了</div><div>请吃999感冒灵</div></div>
    <div id="mydiv4"></div>
</body>
</html>